<template>
    <div>
        <template>
            <el-row>
                <el-col :span="6" v-for="(item, index) in goodsList" :key="index" :offset="1">
                    <el-card :body-style="{ padding: '0px' }" :key="item">
                        <img :src="item.goods_image" class="image" />
                        <div style="padding: 14px">
                            <span>{{ item.goods_name }}</span>
                            <div class="bottom clearfix">
                                <span class="time">园区采摘：¥{{ item.goods_parkPrice }}</span>
                                <span class="time" style="margin-left: 5px">线上：¥{{ item.goods_onLinePrice }}</span>
                            </div>
                            <div class="operate">
                                <el-button size="mini" @click="handleClick(item)">编辑</el-button>
                                <el-button type="primary" size="mini" @click="checkInfoVisible(item)">查看详情</el-button>
                                <el-popconfirm title="确定要删除吗？" @onConfirm="goodsDel(item.goods_id)">
                                    <el-button type="danger" plain size="mini" slot="reference">删除</el-button>
                                </el-popconfirm>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <edit-manage
                :editData="editData"
                :centerDialogVisible="centerDialogVisible"
                @parentCenterDialogVisibleChange="parentCenterDialogVisibleChange"
            />
            <goods-info
                :editData="editData"
                :infoVisible="infoVisible"
                @checkInfoVisible="checkInfoVisible"
            />
        </template>
    </div>
</template>

<style>
.time {
    font-size: 13px;
    color: #999;
}
.operate {
    margin: 10px 0 5px 0;
    overflow: hidden;
}
.operate button {
    margin-left: 5px;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
}

.button {
    padding: 0;
    float: right;
}

.image {
    width: 100%;
    display: block;
    height: 200px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: '';
}

.clearfix:after {
    clear: both;
}
</style>

<script>
import { getGoods, submitGoodsDel } from '../../../api/index';
import EditManage from './EditManage.vue';
import GoodsInfo from './GoodsInfo';
export default {
    data() {
        return {
            currentDate: new Date(),
            goodsList: [],
            editData: {},
            centerDialogVisible: false,
            drawer: false,
            infoVisible:false
        };
    },
    methods: {
        getData() {
            getGoods().then((res) => {
                console.log(res, 'goods');
                this.goodsList = res;
            });
        },
        handleClick(item) {
            this.editData = item;
            this.centerDialogVisible = true;
        },
        parentCenterDialogVisibleChange() {
            this.centerDialogVisible = !this.centerDialogVisible;
            this.getData();
        },
        checkInfoVisible(item){
            this.editData = item;
            this.infoVisible = !this.infoVisible;
        },
        goodsDel(e) {
            const params = {
                goods_id: e
            };
            submitGoodsDel(params).then((res) => {
                console.log(res);
                if (res === 'ok') {
                    this.getData();
                }
            });
        }
    },
    created() {
        this.getData();
    },
    components: { EditManage, GoodsInfo }
};
</script>